<script setup lang="ts">
import type { BusinessUIQueryColumnType } from '@/types/custom'
import { getBusinessBind } from '@/utils/custom'
import { getRelName, isShowCol } from '@/views/components/form/libs'
import { InfoFilled } from '@element-plus/icons-vue'

import TemplateAnnex from '@/views/components/form/components/TemplateAnnex.vue'
import TemplateImage from '@/views/components/form/components/TemplateImage.vue'
import TemplateBusiness from '@/views/components/form/components/TemplateBusiness.vue'
import TemplateJson from '@/views/components/form/components/TemplateJson.vue'
import TemplateTitle from '@/views/components/form/components/TemplateTitle.vue'
import TemplateFormContent from '@/views/components/form/components/TemplateFormContent.vue'
import TemplatePre from '@/views/components/form/components/TemplatePre.vue'
import TemplateSelector from '@/views/components/form/components/TemplateSelector.vue'

interface Props {
  items: BusinessUIQueryColumnType[]
  formatParams?: TypedAny
  params?: TypedAny
}

const modelValue = defineModel<any>({})

const props = defineProps<Props>()

const isTitle = (form: BusinessUIQueryColumnType) => {
  return !['el-alert', 'api-alert', 'custom-business', 'custom-annex', 'custom-title'].includes(
    form.component
  )
}

const clearValidate = () => {}
defineExpose({ clearValidate })
</script>

<template>
  <el-row :gutter="5">
    <template v-for="(form, index) in items">
      <el-col
        v-if="isShowCol(form, modelValue)"
        v-show="!form.hide"
        :key="index"
        v-bind="form.set_json_parse.col"
        class="mb5 form-detail"
      >
        <div class="font12 form-detail-title color-info flex align-center" v-if="isTitle(form)">
          <el-icon>
            <InfoFilled />
          </el-icon>
          <span class="ml5">{{ form.title }}</span>
        </div>
        <div :class="{ 'form-detail-content': isTitle(form) }">
          <el-alert
            v-if="
              ['el-alert', 'api-alert'].includes(form.component) &&
              (modelValue[form.field] || form.title)
            "
            :description="modelValue[form.field]"
            v-bind="getBusinessBind(form)"
            :title="form.title"
            class="el-alert-pre"
          />
          <TemplateSelector
            v-else-if="form.component === 'custom-selector'"
            v-model="modelValue[form.field]"
            :title="form.title"
            :business_id="form.business_id"
            :field="form.field"
            disabled
            v-bind="getBusinessBind(form)"
            class="w100"
          />
          <TemplateBusiness
            v-else-if="['custom-business'].includes(form.component)"
            :model-value="modelValue[form.field]"
            :item="form"
            :form-params="modelValue"
            :params="params"
            disabled
            class="w100"
          />
          <TemplateFormContent
            v-else-if="['custom-business-form'].includes(form.component)"
            v-model="form.business_id"
            :item="form"
            :form-id="modelValue[form.field]"
            :params="params"
            :disabled="true"
            :is-form="false"
            class="w100"
          />
          <TemplateAnnex
            v-else-if="['custom-annex'].includes(form.component)"
            v-model="modelValue[form.field]"
            :title="form.title"
            disabled
            class="w100"
            v-bind="getBusinessBind(form)"
          />
          <TemplateImage
            v-else-if="['custom-image'].includes(form.component)"
            v-model="modelValue[form.field]"
            :title="form.title"
            disabled
            class="w100"
            v-bind="getBusinessBind(form)"
          />
          <TemplateJson
            v-else-if="['custom-json'].includes(form.component)"
            v-model="modelValue[form.field]"
            :form="form"
          />
          <TemplatePre
            v-else-if="['custom-pre'].includes(form.component)"
            v-model="modelValue[form.field]"
            :form="form"
            class="color-base"
          />
          <TemplateTitle
            v-else-if="['custom-title'].includes(form.component)"
            v-model="modelValue[form.field]"
            :form="form"
          />
          <div v-else class="pre-wrap">
            {{ getRelName(form, formatParams, modelValue) }}
          </div>
        </div>
      </el-col>
    </template>
  </el-row>
</template>
<style lang="scss">
.form-detail {
  .form-detail-title {
    background-color: var(--el-fill-color-light);
    border-color: var(--el-border-color);
    border-style: solid;
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 0;
    border-radius: 3px 3px 0 0;
    padding: 3px 5px;
  }

  .form-detail-content {
    border: 1px solid var(--el-border-color);
    border-radius: 0 0 3px 3px;
    padding: 3px 5px;
  }
}
</style>
